<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" th:href="@{'/webjars/layui/2.3.0/css/layui.css'}">
    <link rel="shortcut icon" th:href="@{'/img/favicon.ico'}">
    <link rel="stylesheet" th:href="@{'/webjars/font-awesome/4.7.0/css/font-awesome.css'}">
    <script language="JavaScript" th:src="@{'/webjars/jquery/3.3.1/dist/jquery.min.js'}"></script>
    <script language="JavaScript" th:src="@{'/js/dateformat.js'}" charset="utf-8"></script>
    <script language="JavaScript" th:src="@{'/js/date.js'}" charset="utf-8"></script>

    <script language="JavaScript">
        $(function () {
            layui.use(["laydate", "form"], function () {
                var $laydate = layui.laydate;
                var $form = layui.form;
                //执行一个laydate实例
                $laydate.render({
                    elem: '#birthInput', //指定元素
                    format: "yyyy-MM-dd",
                    max: new Date().format("yyyy-MM-dd"),
                });

                $form.verify({
                    sid: function (value, item) {
                        if (value.trim() === "") {
                            return "学号不能为空"
                        }
                        if (!new RegExp(/^[\d+]{12,12}$/).test(value)) {
                            return "学号只能为数字且为 12 位";
                        }
                    },
                    name: function (value, item) {
                        if (value.trim() === "") {
                            return "姓名不能为空"
                        }
                        if (!new RegExp(/^[\u4e00-\u9fa5_a-zA-Z]+$/).test(value)) {
                            return "姓名只能为中英文，下划线等";
                        }
                    },
                    nation: function (value, item) {
                        if (value.trim() === "请选择") {
                            return "国籍必选";
                        }
                    },
                    origin: function (value, item) {
                        if (value.trim() === "") {
                            return "生源地不能为空"
                        }
                        if (!new RegExp(/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/).test(value)) {
                            return "生源地可以为中文字母数字等";
                        }
                    },
                    idCard: function (value, item) {
                        if (value.trim() === "") {
                            return "身份证号不能为空"
                        }
                        if (!new RegExp(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value)) {
                            return "身份证号必须是 18 位。";
                        }
                        var idBirth = value.substring(6, 14);
                        var re = new RegExp("-", "g");
                        var birth = $("#birthInput").val().replace(re, "");
                        if (idBirth != birth) {
                            return "省份证号上的生日与出生年月不一致";
                        }
                    },
                    address: function (value, item) {
                        if (value.trim() === "") {
                            return "家庭住址不能为空"
                        }
                        if (!new RegExp(/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/).test(value)) {
                            return "家庭住址可以为中英文数字等";
                        }
                    }
                });

                $form.on("submit(stuAdd)", function (data) {
                    $.ajax({
                        url: data.form.action,
                        type: data.form.method,
                        data: data.field,
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code === 400) {
                                if (res.sid === "sid") {
                                    $("#sid").text(res.sidField).css("color", "red");

                                } else {
                                    $("#sid").text("");
                                }

                                if (res.name === "name") {
                                    $("#name").text(res.nameField).css("color", "red");
                                } else {
                                    $("#name").text("");
                                }

                                if (res.origin === "origin") {
                                    $("#origin").text(res.originField).css("color", "red");
                                } else {
                                    $("#origin").text("");
                                }

                                if (res.idCard === "idCard") {
                                    $("#idCard").text(res.idCardField).css("color", "red");
                                } else {
                                    $("#idCard").text("");
                                }

                                if (res.address === "address") {
                                    $("#address").text(res.addressField).css("color", "red");
                                } else {
                                    $("#address").text("");
                                }
                                if (res.msg === "msg") {
                                    layer.msg(res.msgField, {icon: 5});
                                } else {
                                    $("#msg").text("");
                                }
                            }
                            if (res.code === 200) {
                                $("#sid").text("");
                                $("#name").text("");
                                $("#idCard").text("");
                                $("#origin").text("");
                                $("#address").text("");
                                window.location.href = "/stu/student/to/stuInfo/get";
                            }
                        }
                    });
                    return false;
                });
            });
        });
    </script>

</head>
<body>
<ul th:insert="~{fragment/header :: top}"></ul>

<br><br>
<div class="layui-container layui-fluid layui-row">
    <form th:action="@{'/student/stuAdd'}" th:method="post" class="layui-form">
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block">
                <input type="text" name="sid" lay-verify="sid" placeholder="请输入学号" class="layui-input">
            </div>
            <span id="sid"></span>
            <span id="msg"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="name" placeholder="请输入姓名" class="layui-input">
            </div>
            <span id="name"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" th:value="男" th:title="男" checked>
                <input type="radio" name="gender" th:value="女" th:title="女">
            </div>
            <span id="gender"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">国籍</label>
            <div class="layui-input-block">
                <select name="nation" class="layui-select layui-col-lg12" lay-search="" lay-verify="nation">
                    <option th:text="请选择" selected></option>
                    <option th:value="中国" th:text="中国"></option>
                    <option th:value="美国" th:text="美国"></option>
                    <option th:value="日本" th:text="日本"></option>
                    <option th:value="韩国" th:text="韩国"></option>
                    <option th:value="俄罗斯" th:text="俄罗斯"></option>
                </select>
            </div>
            <span id="nation"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">生源地</label>
            <div class="layui-input-block">
                <input type="text" name="origin" lay-verify="origin" placeholder="请输入生源地" class="layui-input">
            </div>
            <span id="origin"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">出生年月</label>
            <div class="layui-input-block">
                <input type="text" name="birth" lay-verify="required" id="birthInput" placeholder="yyyy-MM-dd"
                       class="layui-input" readonly>
            </div>
            <span id="birth"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="idCard" lay-verify="idCard" placeholder="请输入身份证号" class="layui-input">
            </div>
            <span id="idCard"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">家庭住址</label>
            <div class="layui-input-block">
                <input type="text" name="address" lay-verify="address" placeholder="请输入家庭住址" class="layui-input">
            </div>
            <span id="address"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <select name="clazz.cid">
                    <option th:text="${clazz.getClazzName()}" th:value="${clazz.getCid()}"
                            th:each="clazz: ${clazzes}"></option>
                </select>
            </div>
            <span id="clazz.id"></span>
        </div>
        <div class="layui-form-item layui-col-lg-offset3 layui-col-lg4">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="stuAdd">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<div th:insert="~{fragment/header :: footer}"></div>
</body>
<script language="JavaScript" th:src="@{'/webjars/layui/2.3.0/layui.all.js'}" charset="utf-8"></script>
</html>